import React, { Component, Fragment } from 'react'
import { Text, View, StyleSheet } from 'react-native'
import CustomImage from 'src/components/image/CustomImage'
import PropTypes from 'prop-types'
import {
  HEIGHT,
  ONE_PIXEL,
  ScaleS,
  ScaleT,
  NAVIGATIONBAR_HEIGHT,
  IS_IPHONEX,
  NAVIGATIONBAR_NAVIGATION_HEIGHT
} from 'src/utils/ScreenUtil'
import CustomButton from 'src/components/button/CustomButton'
import NavigationUtil from 'src/utils/NavigationUtil'
import { showModal } from 'src/utils/ModalUtil'
import WhiteWrap from 'src/pageP/home/home-page/components/WhiteWrap'
import FilterView2 from 'src/pageP/home/home-page/components/FilterView2'
import OrderComponent from 'src/pageP/home/home-page/components/OrderComponent'
import HotJobComponent from 'src/pageP/home/home-page/components/HotJobComponent'
import { BaseInfo, getUserBaseInfo } from 'src/utils/ConfigUtil'
import { getScale, getTranslate } from 'src/utils/TabViewUtil'
import Animated from 'react-native-reanimated'

const tabBarItemWidth = ScaleS(58)
const barIndicationWidth = ScaleS(9)
const scaleValue = 3
export default class HeaderComponent extends Component {
  static propTypes = {
    navigationState: PropTypes.object,
    jumpTo: PropTypes.func,
    cityClick: PropTypes.func,
    landmark: PropTypes.object,
    orderLabel: PropTypes.array,
    borderTagClick: PropTypes.func,
    filterArr: PropTypes.array,
    positionArr: PropTypes.array,
    regionArr: PropTypes.array,
    educationArr: PropTypes.array,
    withPostCategory: PropTypes.array,
    role: PropTypes.string
  }

  static defaultProps = {
    navigationState: {
      routes: []
    },
    positionArr: [],
    filterArr: [],
    regionArr: [],
    educationArr: [],
    withPostCategory: [[], [], []]
  }

  render () {
    const { navigationState: { routes, index: currentIndex } = { routes: [] }, filterArr, landmark: { cityName }, role, position } = this.props
    const pages = routes.length
    const barViewWidth = tabBarItemWidth * pages
    const translate = getTranslate(position, pages, barViewWidth, barIndicationWidth)
    const scale = getScale(position, pages, scaleValue)
    return (
      <Fragment>
        <View style={styles.headerView}>
          {role === 'B' && <CustomButton style={styles.cityButton} onPress={this._citySelect}>
            <Text style={styles.cityName}>{cityName}</Text>
            {/* <View style={styles.top} /> */}
            <CustomImage
              source={require('src/imgC/triangle/triangle.png')}/>
          </CustomButton>}
          <View style={styles.centerView}>
            <View style={styles.titleView}>
              {routes.map((item, index) => {
                return (
                  <CustomButton
                    key={item.key}
                    style={[styles.titleBtnView, { width: tabBarItemWidth, justifyContent: 'center' }]}
                    onPress={this._titlePress} params={{ index }}>
                    <Text style={[styles.titleText, index === currentIndex && styles.activeTitle]}>{item.title}</Text>
                    {index === currentIndex ? <View style={styles.dotView} /> : <View style={[styles.dotView, { backgroundColor: 'transparent' }]}></View>}
                  </CustomButton>
                )
              })}
            </View>
            {/*<View style={{ width: barViewWidth }}>*/}
            {/*  <Animated.View style={[styles.dotView, { transform: [{ translateX: translate, scaleX: scale }] }]}/>*/}
            {/*</View>*/}

          </View>
          {/* <CustomImage style={[styles.searchImg, { marginRight: ScaleS(20) }]}/> */}
          <CustomButton style={styles.searchImgContainer} onPress={this._searchClick}>
            <CustomImage
              style={styles.searchImg}
              source={require('src/imgC/home/ser.png')}/>
            <View style={[styles.dotView, { backgroundColor: 'transparent', marginTop: ScaleS(3) }]}/>
          </CustomButton>
        </View>
        <View style={styles.filterView}>
          <View style={styles.filterContentView}>
            <View style={styles.leftFilter}>
              <CustomButton
                style={[styles.filterItemBtn]}
                onPress={this._filterShow} params={1}>
                <Text
                  style={[styles.filterItemText, {
                    fontWeight: '400',
                    color: '#3C3C3C'
                  }]}>{filterArr[1].label}</Text>
              </CustomButton>
            </View>
            <View style={styles.rightFilter}>
              <CustomButton style={[styles.filterItemBtn, {
                flexDirection: 'row',
                borderWidth: ONE_PIXEL * 2,
                borderStyle: 'solid',
                borderColor: '#F2F3F5',
                backgroundColor: 'white',
                paddingHorizontal: ScaleS(11),
                marginRight: ScaleS(15),
                justifyContent: 'space-between'
              }]} onPress={this._filterShow} params={0}>
                <Text style={[styles.filterItemText, {
                  fontWeight: '400',
                  color: '#666666'
                }]}>{filterArr[0].label}</Text>
                <CustomImage style={styles.labelImg} source={require('src/imgC/triangle/triangle33.png')}/>
              </CustomButton>
              <CustomButton
                onPress={this._filterShow} params={2}
                style={[styles.filterItemBtn, {
                  flexDirection: 'row',
                  borderWidth: ONE_PIXEL * 2,
                  borderStyle: 'solid',
                  borderColor: '#F2F3F5',
                  backgroundColor: 'white',
                  paddingHorizontal: ScaleS(11),
                  marginRight: ScaleS(15),
                  justifyContent: 'space-between'
                }]}>
                <Text style={[styles.filterItemText, {
                  fontWeight: '400',
                  color: '#666666'
                }]}>{filterArr[2].label}</Text>
                <CustomImage style={styles.labelImg} source={require('src/imgC/triangle/triangle33.png')}/>
              </CustomButton>
              <CustomButton style={[styles.filterItemBtn, {
                flexDirection: 'row',
                marginRight: 0,
                borderWidth: ONE_PIXEL * 2,
                borderStyle: 'solid',
                borderColor: '#F2F3F5',
                backgroundColor: 'white',
                paddingHorizontal: ScaleS(11),
                justifyContent: 'space-between'
              }]} onPress={this._filterShow} params={3}>
                <Text
                  style={[styles.filterItemText, {
                    fontWeight: '400',
                    color: '#666666'
                  }]}>{filterArr[3].label}</Text>
                {/* <View style={styles.rightTriangle} /> */}
                <CustomImage style={styles.labelImg} source={require('src/imgC/triangle/triangle33.png')}/>
              </CustomButton>
            </View>
          </View>
          {/* <View style={styles.horizontalLine} /> */}
        </View>
      </Fragment>
    )
  }

  _titlePress = ({ index }) => {
    const { jumpTo, navigationState: { routes, index: currentIndex } = { routes: [] } } = this.props
    if (currentIndex !== index) {
      jumpTo(routes[index].key)
    }
  }

  /**
   * 城市选择
   * @private
   */
  _citySelect = () => {
    const { landmark: { cityName } } = this.props
    NavigationUtil.navigate('CommonListCity', {
      cityName
    })
  }

  /**
   * 搜索
   * @private
   */
  _searchClick = () => {
    const { navigationState: { index: currentIndex } = { routes: [] } } = this.props
    NavigationUtil.navigate('HomeSearch', { type: currentIndex })
  }

  /**
   * 显示过滤的页面
   * @private
   */
  _filterShow = (index) => {
    const { regionArr, educationArr } = this.props
    let modalView
    switch (index) {
      case 0:
        modalView = this.renderRecommend
        break
      case 1:// 职位 判断B还是C端，然后根据是否有热招进行不同的渲染
        modalView = this.renderPosition(1)
        break
      case 2:
        modalView = this.renderFilterContent(index, regionArr)
        break
      case 3:
        modalView = this.renderFilterContent(index, educationArr)
        break
    }
    this.showModal = showModal(modalView)
  }

  /**
   * 公司信息完善的页面渲染
   */
  _companyInfoCompletedRender = (withPostCategory, currentIndex) => {
    if (withPostCategory[currentIndex].length > 0) { // 有数据
      return this.renderHotJobView(withPostCategory[currentIndex])
    } else { // 没有数据
      let workType = currentIndex
      if (workType === 1) {
        workType = 2
      } else if (workType === 2) {
        workType = 1
      }
      return this._renderEmptyView({
        text: '去发布职位',
        navigateName: 'JobPartTime',
        navigateParam: { type: workType }
      })
    }
  }

  /**
   * 渲染职位
   * @param index
   * @returns {*}
   */
  renderPosition = (index) => {
    const { positionArr, navigationState: { index: currentIndex }, withPostCategory } = this.props
    const userBaseInfo = getUserBaseInfo()
    const { isRoleB, baseInfo } = userBaseInfo
    if (isRoleB) { // b端
      switch (baseInfo) {
        case BaseInfo.notLogin:
          return this._renderEmptyView({
            text: '去登录',
            navigateName: 'OneLogin'
          })
        case BaseInfo.baseInfoNotCompleted:
          return this._renderEmptyView({
            text: '去完善信息',
            navigateName: 'BFirstUserInfo'
          })
        case BaseInfo.companyNotCompleted:
          return this._renderEmptyView({
            text: '去完成审核',
            navigateName: 'BMinePage'
          })
        case BaseInfo.completed:
          return this._companyInfoCompletedRender(withPostCategory, currentIndex)
      }
    } else {
      return this.renderFilterContent(index, positionArr, true)
    }
  }

  /**
   * 渲染空的页面
   * @private
   */
  _renderEmptyView = (params) => {
    return (
      <View style={[styles.emptyView]}>
        <View style={styles.emptyTop}>
          <CustomImage style={styles.emptyImg} source={require('src/imgC/home/login_man.png')}/>
        </View>
        <CustomButton style={styles.emptyTextView} onPress={this._emptyClick} params={params}>
          <Text style={styles.emptyText}>{params.text}</Text>
        </CustomButton>
      </View>
    )
  }

  /***
   * 空页面点击事件
   * @private
   */
  _emptyClick = (params) => {
    this.showModal.close(() => {
      NavigationUtil.navigate(params.navigateName, params.navigateParam)
    })
  }

  /**
   * 渲染推荐
   * @returns {*}
   */
  renderRecommend = () => {
    const { orderLabel, filterArr } = this.props
    return (
      <WhiteWrap>
        <OrderComponent activeLabel={filterArr[0].label} orderClick={this._orderClick} orderLabel={orderLabel}/>
      </WhiteWrap>
    )
  }

  /**
   * 渲染正在热招
   */
  renderHotJobView = (hotJobArr) => {
    const { filterArr } = this.props
    return (
      <WhiteWrap>
        <HotJobComponent
          hotJobArr={hotJobArr}
          activeLabel={filterArr[1].fullLabel}
          activeParams={filterArr[1]}
          itemClick={this._itemClick}/>
      </WhiteWrap>
    )
  }

  _itemClick = (item) => {
    this.showModal.close(() => {
      const { filterArr, borderTagClick } = this.props
      const activeLabel = filterArr[1].fullLabel
      if (activeLabel !== item.label) {
        borderTagClick && borderTagClick(true, item, 1)
      }
    })
  }

  /**
   * 排序的筛选
   * @param order
   * @private
   */
  _orderClick = (item) => {
    this.showModal.close(() => {
      const { filterArr, borderTagClick } = this.props
      const activeLabel = filterArr[0].label
      if (activeLabel !== item.label) {
        borderTagClick && borderTagClick(true, item, 0)
      }
    })
  }

  /**
   * 渲染区域
   */
  renderFilterContent = (index, dataArr, showComplete) => {
    const { filterArr } = this.props
    return (
      <WhiteWrap>
        <FilterView2
          index={index}
          style={styles.filterWrapContentView}
          borderTagClick={this._borderTagClick}
          dataArr={dataArr}
          showComplete={showComplete}
          activeParams={filterArr[index]}
          activeLabel={filterArr[index].label}/>
      </WhiteWrap>
    )
  }

  _borderTagClick = (isActive, params, index) => {
    const { borderTagClick } = this.props
    this.showModal.close(() => {
      borderTagClick && borderTagClick(isActive, params, index)
    })
  }
}

const styles = StyleSheet.create({
  headerView: {
    flexDirection: 'row',
    alignItems: 'flex-end',
    height: NAVIGATIONBAR_HEIGHT,
    paddingBottom: ScaleS(5),
    paddingHorizontal: ScaleS(20),
    backgroundColor: '#FFE400'
  },
  searchImgContainer: {
    position: 'absolute',
    right: ScaleS(20),
    bottom: ScaleS(0),
    width: ScaleS(20),
    height: NAVIGATIONBAR_NAVIGATION_HEIGHT,
    justifyContent: 'flex-end',
    paddingBottom: ScaleS(10)
  },
  searchImg: {
    width: ScaleS(20),
    height: ScaleS(20)
  },
  centerView: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  },
  titleBtnView: {
    alignItems: 'center'
  },
  titleView: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  titleText: {
    color: '#000000',
    fontSize: ScaleT(17),
    fontWeight: '500',
    opacity: 0.3
  },
  activeTitle: {
    opacity: 1,
    color: '#3c3c3c'
  },
  dotView: {
    width: barIndicationWidth,
    height: ScaleS(2),
    borderRadius: ScaleS(1),
    backgroundColor: '#3c3c3c',
    marginTop: ScaleS(8)
  },
  filterView: {
    height: ScaleS(46),
    paddingHorizontal: ScaleS(20),
    backgroundColor: 'white'
  },
  filterContentView: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between'
  },
  leftFilter: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  filterItemBtn: {
    // minWidth: ScaleS(60),
    height: ScaleS(26),
    borderRadius: ScaleS(16),
    backgroundColor: '#F2F3F5',
    paddingHorizontal: ScaleS(15),
    marginRight: ScaleS(15),
    alignItems: 'center',
    justifyContent: 'center'
  },
  HeaderFilterItemBtn: {
    height: ScaleS(30),
    paddingHorizontal: ScaleS(15),
    marginRight: ScaleS(15),
    alignItems: 'center',
    justifyContent: 'center'
  },
  filterItemText: {
    color: '#3c3c3c',
    fontSize: ScaleT(13),
    fontWeight: '500'
  },
  rightFilter: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  rightTriangle: {
    width: 0,
    height: 0,
    borderLeftWidth: ScaleS(4),
    borderRightWidth: ScaleS(0),
    borderTopWidth: ScaleS(3),
    borderBottomWidth: ScaleS(3),
    borderStyle: 'solid',
    borderLeftColor: '#666666',
    borderTopColor: 'transparent',
    borderBottomColor: 'transparent',
    borderRightColor: 'transparent',
    marginLeft: ScaleS(4)
  },
  cityButton: {
    position: 'absolute',
    left: ScaleS(20),
    bottom: ScaleS(0),
    zIndex: 9,
    flexDirection: 'row',
    alignItems: 'center',
    height: NAVIGATIONBAR_NAVIGATION_HEIGHT
  },
  cityName: {
    fontSize: ScaleT(16),
    fontWeight: '600',
    color: '#3C3C3C',
    marginRight: 6
  },
  top: {
    width: 0,
    height: 0,
    marginLeft: ScaleS(8),
    borderLeftWidth: ScaleS(4),
    borderLeftColor: 'transparent',
    borderRightWidth: ScaleS(4),
    borderRightColor: 'transparent',
    borderTopWidth: ScaleS(6),
    borderTopColor: '#000000',
    paddingBottom: ScaleS(7)
  },
  horizontalLine: {
    height: ONE_PIXEL,
    backgroundColor: '#979797',
    opacity: 0.2
  },
  recommendView: {
    padding: ScaleS(20)
  },
  recommendItemView: {
    paddingVertical: ScaleS(20)
  },
  recommendItemText: {
    color: '#000000',
    fontSize: ScaleT(18),
    fontWeight: '400'
  },
  filterWrapContentView: {
    paddingHorizontal: ScaleS(20),
    paddingTop: ScaleS(10),
    paddingBottom: ScaleS(30)

  },
  emptyView: {
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: ScaleS(40),
    backgroundColor: '#fff',
    borderTopLeftRadius: ScaleS(10),
    borderTopRightRadius: ScaleS(10)
  },
  emptyTop: {
    width: '100%',
    height: ScaleS(146),
    flexDirection: 'row',
    justifyContent: 'flex-end',
    alignItems: 'flex-end'
  },
  emptyImg: {
    position: 'absolute',
    right: ScaleS(20),
    bottom: ScaleS(-80),
    width: ScaleS(135),
    height: ScaleS(240)
  },
  emptyTextView: {
    width: '100%',
    height: IS_IPHONEX ? ScaleS(93) : ScaleS(73),
    backgroundColor: '#FFE400',
    // justifyContent: 'center',
    alignItems: 'center'
  },
  emptyText: {
    color: '#3C3C3C',
    fontSize: ScaleT(14),
    fontWeight: '500',
    marginTop: ScaleS(20)
  },
  labelImg: {
    marginLeft: ScaleS(6)
  }
})
